MessageChannel

备注： 此特性在 Web Worker 中可用。

Channel Messaging API 的 MessageChannel 接口允许我们创建一个新的消息通道，并通过它的两个 MessagePort 属性发送数据。

构造函数

MessageChannel(): 返回一个新的 MessageChannel 对象，其中包含两个新的 MessagePort 对象。

实例属性

MessageChannel.port1 只读: 返回 channel 的 port1。
MessageChannel.port2 只读: 返回 channel 的 port2。

示例

在以下的代码块中，你可以看到使用 MessageChannel() 构造函数创建的新 Channel。

当 IFrame 加载完成后，我们将为 MessageChannel.port1 注册一个 onmessage 处理器，并使用 window.postMessage 方法将 MessageChannel.port2 和一条信息传输到 IFrame。

当收到 IFrame 返回的信息时，onMessage 函数会将信息输出到一个段落中。

const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");

// 等待 iframe 加载
iframe.addEventListener("load", onLoad);

function onLoad() {
  // 在 port1 上监听消息
  channel.port1.onmessage = onMessage;

  // 将 port 2 传输到 iframe
  iframe.contentWindow.postMessage("来自主页的您好！", "*", [channel.port2]);
}

// 处理 port 1 收到的消息
function onMessage(e) {
  output.innerHTML = e.data;
}

有关完整的运行示例，请参阅我们在 GitHub 上的 channel messaging 基础示例，也可以实时运行它。

规范

Specification
HTML Standard # message-channels

浏览器兼容性

BCD tables only load in the browser

参见

使用 channel messaging